<template>
    <div class="chapter" ref="scroll" @click="binPopup" @scroll="binScroll">
        <div class="img" v-for="(item,i) in imgList" :key="i" >
            <img class="a" :src="item" alt="">
        </div>
        <van-popup v-model="show" position="top" :style="{ height: '8%' }">
            <van-nav-bar
            :title="title"
            left-arrow
            @click-left="onClickLeft"
            >
            <template #right>
                <van-icon name="share-o" size="18"/>
            </template>
            </van-nav-bar>
        </van-popup>
        <van-popup v-model="show" :overlay="false" position="bottom" :style="{ height: '8%' }">
            <div class="popupBottom">
                <div class="item" @click="goTop">
                    <div class="icon"><van-icon name="arrow-left" /></div>
                    <div class="text">上一话</div>
                </div>
                <div class="item" :class="zhuiShow ? 'active' : ''">
                    <div class="icon" @click="binZhui"><van-icon :color="zhuiShow ? '#58a7f8' : ''" name="star-o" /></div>
                    <div class="text">追漫</div>
                </div>
                <div class="item" @click="binShow1">
                    <div class="icon"><van-icon name="label-o" /></div>
                    <div class="text">目录</div>
                </div>
                <div class="item" @click="goBottom">
                    <div class="icon"><van-icon name="arrow" /></div>
                    <div class="text">下一话</div>
                </div>
            </div>
        </van-popup>
        <van-action-sheet v-model="show1" title="章节内容">
            <div class="content">
            <div class="content-container" v-for="(item,index) in mulu" :key="index" @click="gotoCartoon(index)">
              <div class="content-container-img">
                <img  v-lazy="item.cover" alt="" />
                <div class="lock" v-if="item.is_locked===true">
                  <van-icon name="lock" />
                </div>
              </div>
              <div class="content-container-right">
                <div class="content-container-right-top" :class="zhangId===index?'active':''">
                  <span>{{item.short_title}}</span>
                  <span class="content-tight-title auto-text">{{item.title}}</span>
                </div>
                <div class="content-bottom">
                  <div>{{item.pub_time | time}}</div>
                  <div class="content-bottom-middle">
                    <van-icon name="comment-o" />&nbsp;
                    <span>{{item.comments}}</span>
                  </div>
                  <div>
                    <van-icon name="good-job-o" />&nbsp;
                    <span>{{item.like_count}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-action-sheet>
        <van-overlay :show="zhezhao" @click="binzhezhao" />
        <van-action-sheet v-model="action" title="到付费章节啦！">
            <div class="showbtn">
                <div class="showbtn-top"><div class="login">登录并购买</div></div>
                <div class="showbtn-bottom">放弃购买,退出></div>
            </div>
        </van-action-sheet>
        <div class="yuan" v-show="yuanShow" @click="goBottom">
        下一章
        </div>
    </div>
</template>

<script>
    export default {
        name:'chapter',
        data() {
            return {
                imgList:[],
                show:false,
                muluShow:false,
                show1: false,
                // zhangId:0,
                mulu:[],
                id:'',
                zhezhao:false,
                action:false,
                yuanShow:false,
                timer:'',
                zhuiShow:false,

                zhangId:'',
                // 标题
                title:'',

                arr:''

            }
        },
        // props:{
        //     zhangId:{
        //         type:Number,
        //         default:0
        //     }
        // },
        created() {
            this.id = Number(this.$route.query.id)
            this.zhangId = this.$route.query.Zid | 0;
            
            let arr = JSON.parse(localStorage.getItem('user'));
            
            this.arr = arr;
            if(this.arr != null){
                for(let j = 0 ; j < arr.length ; j++){
                    for(let x = 0 ; x < arr[j].lishi.length ; x++){
                        if(arr[j].lishi[x].id == this.id){
                            if(arr[j].lishi[x].zhangId >=1){
                                this.zhangId = arr[j].lishi[x].zhangId;
                                break;
                            }
                        }

                    }
                }
                this.getData()
                let str = document.cookie.split(';')
                let obj = {}
                str.forEach(v => {
                    obj[v.split('=')[0].trim()] = v.split('=')[1]
                });
                if (obj.login!='true'){
                    return
                }
                let data = JSON.parse(localStorage.getItem('user'))
                for (let i = 0; i < data.length; i++) {
                    if (obj.phone == data[i].phone) {
                        for (let index = 0; index < data[i].zhui.length; index++) {
                            
                            if (this.id == data[i].zhui[index]){
                                this.zhuiShow = true
                            }
                        }
                        break
                    }
                }
            }else{
                this.notGetData()
            }

        },
        methods: {
            binPopup(e){
                if (e.target.className === 'a') {
                    this.show = true
                }
            },
            onClickLeft(){
                this.$router.go(-1);
            },
            binShow1(){
                this.show1 = true
                this.show = false
            },
            getData(){
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                this.imgList = []
                this.axios({
                    url:'ComicDetail',
                    params:{
                        comicId:this.id
                    }
                }).then(res=>{
                    if (res.status === 200){
                        
                        this.mulu = res.data.data.ep_list.reverse();
                        this.title = res.data.data.ep_list[this.zhangId].short_title + res.data.data.ep_list[this.zhangId].title;
                        this.axios({
                            url:'GetImageIndex',
                            params:{
                                epId:this.mulu[this.zhangId].id
                            }
                        }).then((res)=>{
                            if (res.status === 200){
                                let arr = []
                                for (let i = 0; i <res.data.data.images.length; i++) {
                                    if (i%20===0) {
                                        let newArr = []
                                        arr.push(newArr)
                                    }
                                    arr[arr.length-1].push(res.data.data.images[i])
                                }
                                arr.forEach(v=>{
                                    let imgarr = []
                                    v.forEach(e=>{
                                        imgarr.push('https://manga.hdslb.com'+e.path+'@660w.jpg')
                                    })
                                    this.axios({
                                        url:'ImageToken?urls='+JSON.stringify(imgarr)
                                    }).then(res=>{
                                        res.data.data.forEach(e=>{
                                            this.imgList.push(e.url+'?token='+e.token)
                                        })
                                    })
                                })
                                this.$toast.clear();
                                if (this.mulu[this.zhangId].is_locked) {
                                    this.zhezhao = true
                                    this.action = true
                                }
                                //历史
                                let str1 = document.cookie;
                                let str = document.cookie.split(';')
                                
                                let obj = {}
                                str.forEach(v => {
                                    obj[v.split('=')[0].trim()] = v.split('=')[1]
                                });
                                if (obj.login==='true') {
                                let data = JSON.parse(localStorage.getItem('user'))
                                for (let i = 0; i < data.length; i++) {
                                    if (obj.phone == data[i].phone) {
                                        for (let index = 0; index < data[i].lishi.length; index++) {
                                            
                                            if (this.id == data[i].lishi[index].id){
                                                data[i].lishi[index].zhangId=this.zhangId
                                                localStorage.setItem('user',JSON.stringify(data))
                                                return
                                            }
                                        }
                                        data[i].lishi.push({
                                            id:Number(this.id),
                                            zhangId:Number(this.zhangId)
                                        })
                                        localStorage.setItem('user',JSON.stringify(data))
                                        return
                                    }
                                }
                                }
                            }
                        })
                    }
                })
            },
            goTop(){
                if (this.zhangId <= 0) {
                    this.$toast('已经是第一章了')
                    return
                }else{
                    this.zhangId -= 1
                    if(this.arr != null){
                        this.getData();
                    }else{
                        this.notGetData()
                    }
                    
                }
                this.show = false
                this.zhezhao = false
            },
            goBottom(){
                
                
                if (this.zhangId >= this.mulu.length-1) {
                    this.$toast('已经是最后一章了')
                    return
                }
                    this.zhangId += 1
                    if(this.arr != null){
                        this.getData();
                        
                    }else{
                        this.notGetData();
                        
                    }
                
                this.show = false
                this.zhezhao =false
            },
            binzhezhao(){
                this.show = true
            },

            gotoCartoon(index){
                this.zhangId = index;
                    if(this.arr != null){
                        this.getData();
                    }else{
                        this.notGetData();
                    }

                this.show=false;
                this.show1=false;
                this.zhezhao=false;
                this.action=false;

            },
            binScroll(){
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    
                    if (this.$refs.scroll.scrollTop+this.$refs.scroll.clientHeight === this.$refs.scroll.scrollHeight) {
                        this.yuanShow = true
                    }else{
                        this.yuanShow = false
                    }
                },500)
                
            },
            binZhui(){
                if(this.arr != null){
                    let str = document.cookie.split(';')
                    let obj = {}
                    str.forEach(v => {
                    obj[v.split('=')[0].trim()] = v.split('=')[1]
                    });
                    if (obj.login==='true') {
                        let data = JSON.parse(localStorage.getItem('user'))
                    for (let i = 0; i < data.length; i++) {
                        if (obj.phone == data[i].phone) {
                            for (let index = 0; index < data[i].zhui.length; index++) {
                                if (this.id === data[i].zhui[index]){
                                    this.zhuiShow = false
                                    data[i].zhui.splice(index,1)
                                    localStorage.setItem('user',JSON.stringify(data))
                                    return
                                }
                            }
                            data[i].zhui.push(this.id)
                            this.zhuiShow = true
                            break
                        }
                    }
                    localStorage.setItem('user',JSON.stringify(data))
                    // 
                    }
                }else{
                    this.$toast("还没有登录")
                }
                
            },

            // 没有登录
            notGetData(){
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                this.imgList = []
                this.axios({
                    url:'ComicDetail',
                    params:{
                        comicId:this.id
                    }
                }).then(res=>{
                    if (res.status === 200){
                        this.mulu = res.data.data.ep_list.reverse();
                        this.title = res.data.data.ep_list[this.zhangId].short_title + res.data.data.ep_list[this.zhangId].title;
                        this.axios({
                            url:'GetImageIndex',
                            params:{
                                epId:this.mulu[this.zhangId].id
                            }
                        }).then((res)=>{
                            if (res.status === 200){
                                let arr = []
                                for (let i = 0; i <res.data.data.images.length; i++) {
                                    if (i%20===0) {
                                        let newArr = []
                                        arr.push(newArr)
                                    }
                                    arr[arr.length-1].push(res.data.data.images[i])
                                }
                                arr.forEach(v=>{
                                    let imgarr = []
                                    v.forEach(e=>{
                                        imgarr.push('https://manga.hdslb.com'+e.path+'@660w.jpg')
                                    })
                                    this.axios({
                                        url:'ImageToken?urls='+JSON.stringify(imgarr)
                                    }).then(res=>{
                                        res.data.data.forEach(e=>{
                                            this.imgList.push(e.url+'?token='+e.token)
                                        })
                                    })
                                })
                                this.$toast.clear();
                                if (this.mulu[this.zhangId].is_locked) {
                                    this.zhezhao = true
                                    this.action = true
                                }
                            }
                        })
                    }
                })
            }
        },
        filters:{
            time(v){
               return v.split(' ')[0]
            }
        }
    }
</script>

<style lang="less" scoped>
    .chapter{
        width: 100%;
        height: 100vh;
        overflow: auto;
        position: relative;
        .yuan{
            width: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            position: fixed;
            right: 10px;
            bottom: 10px;
            z-index: 999;
            background-color: rgba(88, 168, 248, 0.688);
        }
    }
    .active{
        color: #58a7f8 !important;
    }
    .lock{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #adacb1;
        text-align: center;
    }
    .login{
        width: 40%;
        background-color: #58a7f8;
        border-radius: 15px;
        color: #fff;
        font-weight: bold;
        padding: 5px 0px;
    }
    .showbtn{
        width: 100%;
        text-align: center;
        .showbtn-top{
            padding: 5px 15px;
            text-align: center;
            display: flex;
            justify-content: center
        }
        .showbtn-bottom{
            margin-top: 8px;
            margin-bottom: 5px;
        }
    }
    /deep/.van-icon-comment-o:before{
        color: #adacb1;
    }
    /deep/.van-icon-good-job-o:before{
        color: #adacb1;
    }
    .content-container-right-top{
        display: flex;
        align-items: center;
    }
    .content {
        padding: 10px;
        overflow-y: auto;
        .content-container {
            display: flex;
            margin-bottom: 10px;
            .content-container:last-child {
            margin-bottom: 0px;
            }
            .content-container-img {
            // width: 120px;
            width: 40%;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            > img {
                display: block;
                width: 100%;
                height: 100%;
            }
            }
            .content-container-right {
                width: 60%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            .content-tight-title {
                display: inline-block;
                // width: 160px;
                flex: 1;
                padding: 0 10px;
            }
            .content-bottom {
                display: flex;
                color: #adacb1;
                .content-bottom-middle {
                padding: 0 10px;
                }
            }
            }
        }
        }

        /deep/.van-cell__title {
            text-align: center;
            }
            /deep/.van-cell {
            padding: 0;
            background-color: #ededed;
            font-size: 12px;
        }


    /deep/.van-nav-bar{
        line-height: calc(100vh * 0.08);
    }
    /deep/.van-nav-bar__content{
        height: 100%;
        background-color: #272a33;
    }
    /deep/.van-nav-bar__title{
        color: white;
    }
    /deep/.van-icon{
        color: white;
    }
    /deep/.van-hairline--bottom::after{
        border-bottom-width:0;
    }
    // /deep/.van-popup{
    //     opacity: 0.5;
    // }
    .img{
        width: 100%;
        img{
            width: 100%;
            display: block;
        }
    }
    .popupBottom{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(40, 43, 52,0.5);
        .item{
            width: 60px;
            color: white;
            .icon{
                text-align: center;
                font-size: 18px;
            }
            .text{
                text-align: center;
            }
        }
    }
</style>